<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="header-title">意见反馈</view>
    </view>

    <!-- 消息展示区域 -->
    <scroll-view scroll-y="true" class="chat-area">
      <!-- 平台的消息 -->
      <view class="chat-message platform">
        <image class="avatar" src="/static/avatar-platform.png"></image>
        <view class="message-bubble platform-bubble">
          <text>你的消息我们已经收到，回尽快回复您</text>
        </view>
      </view>
      
      <!-- 用户的消息（示例） -->
      <view class="chat-message user">
        <image class="avatar" src="/static/avatar-user.png"></image>
        <view class="message-bubble user-bubble">
          <text>这是用户的消息示例。</text>
        </view>
      </view>

      <!-- 更多消息可以在这里继续添加 -->
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <input class="input-field" placeholder="请输入内容" v-model="inputContent" />
      <button class="send-button" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputContent: '',  // 用户输入内容
    };
  },
  methods: {
    sendMessage() {
      if (this.inputContent.trim()) {
        // 在这里处理用户消息发送逻辑
        console.log('发送消息:', this.inputContent);
        this.inputContent = '';  // 清空输入框
      }
    }
  }
};
</script>

<style scoped>
/* 页面整体布局 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f7f7;
}

/* 顶部标题栏样式 */
.header {
  background-color: #3b82f6;
  padding: 10px;
  color: white;
  text-align: center;
}

.header-title {
  font-size: 18px;
}

/* 消息展示区域 */
.chat-area {
  flex: 1;
  padding: 10px;
  background-color: white;
}

/* 消息样式 */
.chat-message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.chat-message.user {
  justify-content: flex-end;
}

.chat-message.platform {
  justify-content: flex-start;
}

/* 头像样式 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

/* 消息气泡样式 */
.message-bubble {
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-bubble {
  background-color: #e0f7fa;
  align-self: flex-end;
}

.platform-bubble {
  background-color: #ffecb3;
  align-self: flex-start;
}

/* 输入区域样式 */
.input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
  background-color: white;
}

.input-field {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

.send-button {
  padding: 10px 20px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>
